<template>
  <div>
    <!-- <van-tabs v-model="active">
      <van-tab title="绑卡邀请"></van-tab>
      <van-tab title="游戏邀请"></van-tab>
    </van-tabs>-->
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <p class="hwo_man">
        共有
        <span>{{total}}</span>位好友
      </p>
      <table class="table_list">
        <tr>
          <th></th>
          <th>昵称</th>
          <th>状态</th>
          <th>办卡时间</th>
        </tr>
        <tr v-for="(item,index) in list" :key="index">
          <td>{{index+1}}</td>
          <td>{{item.userName}}</td>
          <td>{{item.state == '1'?'已办卡':'未办卡'}}</td>
          <td>{{item.clickBindTime}}</td>
        </tr>
      </table>
    </van-list>
  </div>
</template>

<script>
import { List, Cell, Tab, Tabs } from 'vant';
export default {
  data() {
    return {
      active: 0,
      pageNum: 1,
      error: false,
      loading: false,
      finished: false,
      total: 0,
      list: [
        // {
        // },
        // {
        //   pageNum: 1,
        //   list: [],
        //   error: false,
        //   loading: false,
        //   finished: false,
        //   total: 0
        // }
      ]
    };
  },
  components: {
    'van-list': List,
    'van-cell': Cell,
    'van-tabs': Tabs,
    'van-tab': Tab
  },
  methods: {
    onLoad() {
      // 异步更新数据
      if (!this.finished) {
        setTimeout(() => {
          this.$http
            .post('/tuserBindcard/inviteLogs', {
              type: this.active + 1,
              pageNum: this.pageNum++
            })
            .then(res => {
              console.log(res);
              this.loading = false;
              this.list.push(...res.data.list);
              this.total = res.data.total;
              if (res.data.list.length < 10) {
                this.finished = true;
              }
            });
        }, 500);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
tr td:nth-child(2) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.table_list {
  table-layout: fixed;
  width: 100%;
  text-align: center;
  // border-collapse: collapse;
  // :nth-child(even){
  //   background-color: #fed8ce;
  // }
  :first-child {
    width: 10%;
    font-size: 26px;
    color: #3d3d3d;
  }
  :nth-child(2) {
    width: 25%;
    font-size: 26px;
    color: #3d3d3d;
  }
  :nth-child(3) {
    width: 25%;
    font-size: 26px;
    color: #3d3d3d;
  }
  tr {
    height: 72px;
    &:nth-child(2n) {
      background-color: #ade3fe;
    }
    td,
    th {
      border: 1px solid #e0e0e0;
      color: #666666;
      font-size: 26px;
    }
  }
}
.hwo_man {
  font-size: 26px;
  color: #282828;
  margin: 30px 28px;
  span {
    color: #fe0101;
  }
}
</style>
